<template>
  <div>
    <h3 @click="getAuthorList">{{ $t("author.title") }}</h3>
    <div class="search">
      <el-button
        type="success"
        plain
        icon="el-icon-circle-plus-outline"
        style="width: 300px"
        @click="createdProject()"
        >{{ $t("author.created") }}</el-button
      >
    </div>
    <el-table :data="reptileAuthorList" style="width: 100%">
      <el-table-column
        width="61"
        type="index"
        :label="$t('author.table.index')"
      ></el-table-column>
      <el-table-column prop="name" :label="$t('author.table.name')">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="phone_number"
        :label="$t('author.table.tel')"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="email"
        :label="$t('author.table.email')"
      >
      </el-table-column>
      <el-table-column :label="$t('author.table.operation')">
        <template slot-scope="scope">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            plain
            @click="amendBtn(scope.row)"
            >{{ $t("author.btn.editor") }}</el-button
          >
          <el-popconfirm
            :title="$t('author.btn.del_sure')"
            @confirm="delProject(scope.row)"
            style="margin: 0 0 0 10px"
          >
            <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              plain
              >{{ $t("author.btn.delete") }}</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加模态框 -->
    <AddReptileDialog
      :DialogShow="ReptileDialogShow"
      @closeDialog="createdProject"
    />
    <!-- 修改模态框 -->
    <AmendReptileDialog
      :DialogShow="AmendReptileDialogShow"
      :form="AmendReptileRowData"
      @closeDialog="amendBtn"
    />
  </div>
</template>

<script>
import AddReptileDialog from "../../../components/addReptileDialog.vue";
import AmendReptileDialog from "../../../components/amendReptileDialog.vue";
export default {
  components: {
    AddReptileDialog,
    AmendReptileDialog,
  },
  data() {
    return {
      reptileAuthorList: [],
      //添加作者模态框状态
      ReptileDialogShow: false,
      //修改作者模态框状态
      AmendReptileDialogShow: false,
      AmendReptileRowData: {
        name: "",
      },
    };
  },
  created() {
    this.getAuthorList();
  },
  methods: {
    //修改按钮
    amendBtn(state) {
      this.AmendReptileDialogShow = this.AmendReptileDialogShow ? false : true;
      if (typeof state == "object") return (this.AmendReptileRowData = state);
      if (!state.id) return this.getAuthorList();
    },
    //添加按钮
    createdProject(state) {
      this.ReptileDialogShow = this.ReptileDialogShow ? false : true;
      if (state) return this.getAuthorList();
    },
    //删除按钮
    delProject(data) {
      this.$http
        .get("/reptile/auth/del", { params: { id: data.id } })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success(this.$t("author.btn.del_success_msg"));
            this.getAuthorList();
          } else {
            this.$message.error(this.$t("author.btn.del_error_msg"));
          }
        });
    },
    getAuthorList() {
      this.$http
        .get("/reptile/auth/list", {
          params: { page: 1, pagesize: 10, query_text: "" },
        })
        .then((res) => {
          this.reptileAuthorList = res.data.data;
        });
    },
  },
};
</script>

<style lang="less" scoped>
h3 {
  color: #606266;
}
.search {
  margin: 10px 0;
  .el-input {
    width: 34%;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>